import React, { useEffect, useState } from 'react'
import {  MinusCircleOutlined, CheckOutlined } from '@ant-design/icons'
import { Button, Form, Input } from 'antd';
import { useQuestionForm } from '../../hooks/useForm';

interface Props {
  fileName:number | string
}



const Single:React.FC<Props> = (props) => {

  const [activeIndex,setActiveIndex] = useState(-1)
  const form = useQuestionForm()
  const options = Form.useWatch(['single',props.fileName,'options'], form!)
  useEffect(() => {
    // 监听选项内容改变 根据选中的下标更新答案
    if(activeIndex !== -1) {
      const answer = form?.getFieldValue(['single', props.fileName,'options', activeIndex])
      form?.setFieldValue(['single', props.fileName, 'answer'], answer)
    }
  },[options, activeIndex])

  return (
    <div>
      <Form.Item
        label="题目"
        name={ [props.fileName, "question"] }
        rules={[
          {
            required: true, 
            message: "请输入题目",
          },
        ]}
        >
          <Input placeholder='请输入题目'/>
      </Form.Item>
        {/* 选项卡 */}
      <Form.List
        name={[ props.fileName, "options" ]}
        rules={[
          {
            validator: async (_, names) => {
              if (!names || names.length < 4) {
                return Promise.reject(new Error('至少有四个选项'));
              }
            },
          },
        ]}
        initialValue={['','','','']}
      >
        {(fields, { add, remove }, { errors }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                label={`选项${index + 1}`}
                required={false}
                key={field.key}
              >
                {/* 单个选项校验 */}
                <Form.Item
                  name={[ field.name ]}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: "请输入选项",
                    },
                  ]}
                  noStyle
                >
                  <Input placeholder="选项" style={{ width: '60%' }} />
                </Form.Item>
                <Button 
                type={index === activeIndex ? 'primary' :'default'} 
                style={{margin:'0 10px',width:64}}
                onClick={() => setActiveIndex(index)}
                >
                  {index === activeIndex ? <CheckOutlined /> : '选择'}  
                </Button>
                {/* 删除按钮 */}
                {fields.length > 4 && (
                  <MinusCircleOutlined onClick={() => {
                    remove(field.name)
                    if(index === activeIndex) {
                      setActiveIndex(-1)
                    }
                  }}/>
                )}
              </Form.Item>
            ))}
            <Form.Item label={null}>
              <Button
                type="dashed"
                onClick={() => add()}
                style={{ width: '60%' }}
              >
                添加选项
              </Button>
              <Form.ErrorList errors={errors} />
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item
        label={null}
        name={[props.fileName,'answer']}
        wrapperCol={{ span: 16, offset: 4 }}
        rules={[
          {required:true, message:"请选择答案"}
        ]}
      >
      </Form.Item>
    </div>
  )
}

export default Single